<template>
    <div id="register">
        <div>
            <img id="registerTitle" src="../assets/register/registertitle.png" />
    
            <div id="registerFormBg">
                <!--<img id="registerFormBg" src="../assets/register/registerFormBg.png" />-->
                <form id="registerForm" action="" v-on:submit="addUser">
                    <div class="input_1">
                        <img class="registerpic" src="../assets/register/registerUsername.jpg" />
                        <input type="text" class="registerInput" name="username" v-model="user.username" placeholder="请输入用户名" />
                    </div>
                    </br>
                    <div class="input_1">
                        <img class="registerpic" src="../assets/register/registerPassword.jpg" />
                        <input type="password" class="registerInput" v-model="user.password" placeholder="请输入密码" />
                    </div>
                    </br>
                    <div class="input_1">
                        <img class="registerpic" src="../assets/register/registerPassword.jpg" />
                        <input type="password" v-model="user.repassword" class="registerInput" placeholder="确认密码" />
                    </div>
                    </br>
                    <input type="button" id="backBtn" @click="goback" value="返回" />
                    <input type="button" id="registerBtn" @click="addUser" value="注册" />
                </form>
                <span>已有帐号 ></span>
                <input type="button" id="goLogin" @click="gologin" value="登录" />
            </div>
        </div>
        <!--注册失败提示-->
        <mt-popup v-model="popupVis_reg" position="top" class="tishi_1">
            <span class="popupVisible_1">注册失败~</Span>
        </mt-popup>
        <!--注册成功提示-->
        <mt-popup v-model="popupVis_reg_ok" position="top" class="tishi_1">
            <span class="popupVisible_1">注册成功!</Span>
        </mt-popup>
        <!--输入不完整提示-->
        <mt-popup v-model="popupVis_reg_que" position="top" class="tishi_1">
            <span class="popupVisible_1">请填写上完整信息!</Span>
        </mt-popup>
        <!--密码规格不规范-->
        <mt-popup v-model="popupVis_reg_passW" position="top" class="tishi_1">
            <span class="popupVisible_1">密码至少6个字符!</Span>
        </mt-popup>
    </div>
</template>

<script>
import Axios from 'axios'


export default {
    name: 'signup',
    data() {
        return {
            user: {},
            message: '',
            popupVisible_1: false,
            popupVis_reg: false,
            popupVis_reg_ok: false,
            popupVis_reg_que: false,
            popupVis_reg_passW: false,
        }
    },
    methods: {
        addUser(e) {
            // 判断选项是否符合要求
            var router = this.$router
            if (!this.user.username || !this.user.password || !this.user.repassword) {
                this.popupVis_reg_que = true
                // alert('请填写上完整信息')
            }
            else if (this.user.password.length < 6) {
                this.popupVis_reg_passW = true
                // alert('密码至少6个字符')
            }
            else if (this.user.password !== this.user.repassword) {
                this.popupVisible_1 = true
            }
            else {
                var newUser = {
                    username: this.user.username,
                    password: this.user.password
                }
                //  发送数据注册
                Axios.post('/api/signUp', newUser)
                    .then(function (res) {
                        console.log(res.data)
                        if (res.data.code === 0) {
                            this.popupVis_reg_ok = true;
                            // alert("注册成功")
                            router.push({ path: '/login', query: { user: res.data.data.username } })
                        } else {
                            this.popupVis_reg = true;
                            // alert("注册失败")
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        },
        // 路由跳转
        gologin() {
            this.$router.push({ path: '/login' })
        },
        // 路由跳转
        goback() {
            this.$router.push({ path: '/' })
        }
    }
}
</script>
<style>
.tishi_1 {
    background-color: transparent;
    color: rgba(0, 0, 0, 1) !important;
}

#register {
    width: 100%;
    height: 736px;
    background-image: url("../assets/register/registerBackground.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    margin: 0 auto;
}

#registerTitle {
    width: 80%;
    height: 60px;
    margin-top: 110px;
}

#registerFormBg {
    /*border: 1px solid black;*/
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.6);
    height: 300px;
    text-align: center;
    margin-top: -28px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-top: 30px;
}

.input_1 {
    margin-left: auto;
    margin-right: auto;
    width: 67%;
    /*border: 1px solid black;*/
}

.registerpic {

    float: left;
    width: 37px;
    vertical-align: middle;
}

.registerInput {
    height: 35px;
    border: none;
    margin-left: -7px;
    /*margin-top: 20px;*/
    border-radius: 0px 20px 20px 0px;
}

input::-webkit-input-placeholder {
    padding-left: 10px;
    font-size: 14px;
}

#registerBtn {
    width: 100px;
    height: 35px;
    border: none;
    background-image: url('../assets/register/registerBtn.png');
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    margin-top: 35px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 45px;
}

#backBtn {
    width: 100px;
    height: 35px;
    color: gray;
    border: 1px solid lightgray;
    background-color: white;
    border-radius: 45px;
    font-size: 16px;
    margin-top: 10px;
}

#register span {
    color: gray;
    font-size: 14px;
}

#goLogin {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #0dcac6;
    margin-top: 5px;
}
</style>